<template>
    <div class="content">
        <img class="advertisement"
            src="https://yanxuan.nosdn.127.net/fb86577144b14235130403c64f396c09.png?quality=75&type=webp&imageView&thumbnail=0x196"
            alt="">
        <div class="content-div1">
            <div class="content-lists" v-for="(item, index) in this.li" :key="index">
                <h1 class="content-title">{{ item.name }}</h1>
                <div class="content-cons">
                    <div class="content-div2" v-for="(ite, index) in item.categoryList" :key="index">
                       <router-link :to="{ name: 'b7-detail', params: { id: categoryId, subCategoryId: ite.id } }">
                                <img class="content-img" :src="ite.wapBannerUrl" alt="">
                            </router-link>
                        <p>{{ ite.name }}</p>
                    </div>
                </div>


            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            li: [],
            categoryId: '',
        };
    },
    async created() {
        try {
            const res = await axios.get('/item/cateList.json?csrf_token=488a4e0e372cb731535522b4baf07040&__timestamp=1682776250755&categoryId=109243029')
            const arr = res.data.data.categoryGroupList;
            this.categoryId = res.data.data.currentCategory.id;
            let page = document.querySelector('#container .page');
            page.style.bottom = '49px'
            page.style.display = 'flex'
            this.li = arr.map(function (item) {
                return item
            })
            // console.log(this.li);
        } catch (error) {
            console.error(error);
        }

    }
};
</script>

<style></style>